<template>
  <view class="px-24rpx">
    <up-swiper
      :list="list"
      :autoplay="false"
      height="305rpx"
      radius="0"
      @change="swiperChange"
    >
      <template #indicator>
        <view
          class="indicator flex"
        >
          <view
            v-for="(_, index) in list"
            :key="index"
            class="indicator__dot"
            :class="[index === current && 'indicator__dot--active']"
          />
        </view>
      </template>
    </up-swiper>
  </view>
</template>

<script setup lang="ts">
const current = ref(0);
interface SwiperChangeParams {
  current: number;
  currentItemId: string;
  source: string;
};
const swiperChange = (event: SwiperChangeParams) => {
  current.value = event.current;
  console.log('banner当前值:::', current.value)
};

const props = defineProps({
  bannerList: {
    type: Array,
    default: () => [],
  }
});
const list = reactive(props.bannerList);
</script>

<style scoped lang="scss">
.indicator__dot {
  margin: 0 5rpx;
  width: 24rpx;
  height: 8rpx;
  background: #fff;
  border-radius: 4rpx;
  opacity: 0.3;
  transition: all .3s ease;
}

.indicator__dot--active {
  width: 48rpx;
  opacity: 1;
}
</style>
